<template>
  <div class="header-box">
    <div class="title">
      <img class='img'
           src="../../static/image/标题.png"
           alt />
    </div>
    <ul class="nav">
      <li class="option"
          :class="position == item.id ? 'active' : '' "
          v-for="item in menuItems"
          :key="item.id"
          @click="addActive(item.id)">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import Bus from "../utils/bus.js"
export default {
  name: "cHeader",
  data () {
    return {
      menuItems: [
        {
          id: 1,
          name: "空间",
          path: "/space"
        },
        {
          id: 2,
          name: "人流",
          path: "/human-traffic"
        },
        {
          id: 3,
          name: "车流",
          path: "/car-traffic"
        },
        {
          id: 4,
          name: "维护管理",
          path: "/management"
        }
      ],
      position: 1
    };
  },
  methods: {
    addActive (id) {
      this.position = id;
      this.$router.push(this.menuItems[id - 1].path)
      // 人流页面的时候加载地图热力图
      if (id === 2) {
        Bus.$emit('heatMap')
      } else {
        Bus.$emit('removeHeatMap')
      }
    }
  },
  created () {
    if (this.$route.path == "/management") {
      this.position = 4;
    } else if (this.$route.path == "/car-traffic") {
      this.position = 3;
      // Bus.$emit('heatMap')
    } else if (this.$route.path == "/human-traffic") {
      this.position = 2;
    } else if (this.$route.path == "/space") {
      this.position = 1;
    }
  }
};
</script>  

<style lang="scss">
$precent: 100vw / 1920;
.header-box {
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    width: 100%;
    .img {
      // height: 125*$precent;
      width: 100%;
      font-size: 30 * $precent;
      z-index: 10;
    }
  }

  .nav {
    padding-bottom: 20 * $precent;
    padding-right: 8 * $precent;
    padding-left: 8 * $precent;
    margin-top: -20 * $precent;
    display: flex;
    width: 432 * $precent;
    flex-direction: row;
    justify-content: center;
    background: url("../../static/image/菜单栏.png") no-repeat;
    background-size: 100% 100%;
    > li:nth-child(1).active {
      color: #fff;
      background: url("../../static/image/菜单选择1.png") no-repeat;
      background-size: 100% 100%;
    }
    > li:nth-child(2).active {
      color: #fff;
      background: url("../../static/image/菜单选择2.png") no-repeat;
      background-size: 100% 100%;
    }
    > li:nth-child(3).active {
      color: #fff;
      background: url("../../static/image/菜单选择3.png") no-repeat;
      background-size: 100% 100%;
    }
    > li:nth-child(4).active {
      color: #fff;
      background: url("../../static/image/菜单选择4.png") no-repeat;
      background-size: 100% 100%;
    }
    .option {
      flex: 1;
      height: 55 * $precent;
      line-height: 65 * $precent;
      font-size: 20 * $precent;
      // color: white;
      color: rgb(113, 223, 255);
      z-index: 1;
      cursor: pointer;
    }
  }
}
</style>